<script setup lang="ts">
import type { WARNING_LEVELS, WARNING_STATES } from '@/enum'
import {
  warningInformationStates,
  warningLevels,
} from '@/mixins/Warning'

defineEmits<{
  (e: 'search'): void
}>()

const query: {
  type?: WARNING_LEVELS
  state?: WARNING_STATES
  code?: string
  serieNo?: string
  warningCategory?: string
  indicatorNumber?: string
  pointId?: number
} = shallowReactive({
  type: undefined,
  state: undefined,
  code: undefined,
  serieNo: undefined,
})

defineExpose({
  query,
})
</script>

<template>
  <ElForm inline :model="query" label-width="90px">
    <ElFormItem label="告警类别">
      <DictionaryPicker v-model="query.warningCategory" code="GAO_JING_LEI_BIE" />
    </ElFormItem>
    <ElFormItem label="告警状态" class="width-fit">
      <ElSelect
        v-model="query.state"
        class="width-100"
        clearable
        filterable
        @clear="query.state = undefined"
      >
        <ElOption
          v-for="item in warningInformationStates"
          :key="item.value"
          v-bind="item"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem class="width-fit" label="告警类型">
      <ElSelect
        v-model="query.type"
        class="width-100"
        clearable
        filterable
        @clear="query.type = undefined"
      >
        <ElOption
          v-for="item in warningLevels"
          :key="item.value"
          v-bind="item"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="测点点位号" class="width-fit1">
      <ElInput
        v-model="query.code"
        clearable
        @clear="query.code = undefined"
      />
    </ElFormItem>
    <ElFormItem label="工单号" class="width-fit1">
      <ElInput
        v-model="query.serieNo"
        clearable
        @clear="query.serieNo = undefined"
      />
    </ElFormItem>
    <ElFormItem label="用能单元">
      <PointTreePicker v-model="query.pointId" />
    </ElFormItem>
    <ElFormItem label="指标代码">
      <ElInput v-model="query.indicatorNumber" clearable />
    </ElFormItem>
    <ElFormItem>
      <SearchButton @click="$emit('search')" />
    </ElFormItem>
  </ElForm>
</template>

<style scoped>
/* .width-fit {
  width: 230px;
}
.width-fit1 {
  width: 230px;
}
.width-fit :deep(.el-input),
.width-fit1 :deep(.el-input) {
  min-width: auto !important;
} */
</style>
